<template>
	<div class="footer_container">
		<div class="top_opt_info">
			<el-tooltip effect="dark" content="欢迎提出建议以及反馈bug" placement="top">
				<div class="info_item cursor_class">
					<a href="https://support.qq.com/product/426248" target="_bank">
						<el-icon>
							<WarnTriangleFilled />
						</el-icon>
						<span>产品反馈</span>
					</a>
				</div>
			</el-tooltip>
			<el-tooltip effect="dark" content="查看本站技术及源码" placement="top">
				<div class="info_item cursor_class">
					<a href="https://gitee.com/chenshuai12345/blog-duck" target="_blank">
						<el-icon>
							<Promotion />
						</el-icon>
						<span>项目支持</span>
					</a>
				</div>
			</el-tooltip>
			<el-tooltip effect="dark" content="联系作者" placement="top">
				<div class="info_item cursor_class">
					<a href="http://" target="_blank">
						<el-icon>
							<Avatar />
						</el-icon>
						<span>联系作者</span>
					</a>
				</div>
			</el-tooltip>
			<el-tooltip effect="dark" content="本站所有数据均来源于网络，仅供学习参考，如有侵权，非常抱歉，请立即联系作者删除" placement="top">
				<div class="info_item">
					<a href="javascript:;">
						<el-icon>
							<WarningFilled />
						</el-icon>
						<span>免责声明</span>
					</a>
				</div>
			</el-tooltip>
		</div>
		<div class="icp_info">
			<!-- <span style="text-align: center;">Copyright © www.hbblog.com All Rights Reserved</span> -->
			<span style="text-align: center;">Copyright © http://114.132.240.29 All Rights Reserved</span>
			<!-- <span class="">备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" class="primay">
					湘ICP备20007253号-1</a></span> -->
		</div>
	</div>
</template>

<script lang="ts" setup>
import {
	WarnTriangleFilled,
	WarningFilled,
	Avatar,
	Promotion,
} from '@element-plus/icons-vue'
</script>

<style lang="scss" scoped>
@import '@/assets/style/reset.scss';

.footer_container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 40px 0;

	.top_opt_info {
		display: flex;
		margin-bottom: 20px;
		flex-wrap: wrap;
		justify-content: center;

		.info_item {
			margin-bottom: 8px;

			a {
				display: flex;
				align-items: center;
				font-size: 18px;
				margin: 0 10px;
				color: rgba(0, 0, 0, 0.45);

				&:hover {
					color: #409eff;
					transition: all 0.2s;
				}
			}

			span {
				font-size: 14px;
				margin-left: 4px;
			}
		}
	}

	.icp_info {
		padding: 0 20px;
		line-height: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 14px;
		color: rgba(0, 0, 0, 0.45);
	}
}
</style>